import { Button, Popup, Table, Tag } from "@nutui/nutui-react-taro";
import { View } from "@tarojs/components";
import { useRequest } from "ahooks";
import { useEffect, useState } from "react";
import { AtPagination, AtSearchBar } from "taro-ui";
import Taro from "@tarojs/taro";
import { Filter } from "@nutui/icons-react-taro";
import { Copy } from "@nutui/icons-react-taro";
import DaySelectPopforBing from "../../../components/DaySelectPop";
import { getCommonLog } from "../../../servers/servers";

const dianchiLog = () => {
  const [total, setTotal] = useState(0);

  const columns1 = [
    {
      title: "号码",
      key: "mobile",
      fixed: "left",
      render: (_record, index) => {
        return (
          <div
            onClick={() => {
              Taro.setClipboardData({
                data: _record?.mobile,
                success: function (res) {
                  Taro.getClipboardData({
                    success: function (res) {
                      console.log(res.data); // data
                    },
                  });
                },
                fail: function (res) {
                  console.log("res", res.errMsg);
                },
              });
            }}
          >
            {_record?.mobile}{" "}
          </div>
        );
      },
    },
    
    {
      title: "时间",
      key: "create_time",
    },
    {
      title: "电池编码",
      key: "content",
      render: (_record, index) => {
        return (
          <div
            onClick={() => {
              Taro.setClipboardData({
                data: _record?.content,
                success: function (res) {
                  Taro.getClipboardData({
                    success: function (res) {
                      console.log(res.data); // data
                    },
                  });
                },
                fail: function (res) {
                  console.log("res", res.errMsg);
                },
              });
            }}
          >
            {_record?.content}{" "}
          </div>
        );
      },
    },
    {
      title: "结果",
      key: "status_text",
      render: (record, _text) => {
        if (record?.status === 1) {
          return <Tag type="success">{record?.status_text}</Tag>;
        }
        return <Tag type="danger">{record?.status_text}</Tag>;
      },
    },
  ];

  const { data, run } = useRequest(
    async ({ page, ...ret }) => {
      Taro.showLoading({
        title: "加载中...",
      });

      const _params = {
        type: "binding",
      };
      if (ret?.mobile) {
        _params.mobile = ret.mobile;
      }
      if (ret?.startDate && ret?.endDate) {
        _params.create_time__range = [ret?.startDate, ret?.endDate];
      }
      if (ret?.status) {
        _params.status = ret?.status;
      }
      console.log("_params_params_params", _params);
      try {
        const { data } = await getCommonLog({
          page,
          filters: JSON.stringify({
            ..._params,
          }),
        });

        setTotal(data?.count);
        Taro.hideLoading();
        return data;
      } catch (error) {
        Taro.hideLoading();
        return [];
      }
    },
    {
      manual: true,
    }
  );

  // 要搜索的手机号
  const [searchPhone, setSearchPhone] = useState("");

  const [currentPage, setcurrentPage] = useState(1);

  useEffect(() => {
    run({
      page: currentPage,
      mobile: searchPhone,
    });
  }, [currentPage, searchPhone]);

  const [searchValue, setSearchValue] = useState("");

  const [dayOpen, setDayOpen] = useState(false);

  return (
    <>
      <View
        style={{
          display: "flex",
          alignItems: "center",
        }}
      >
        <View
          style={{
            flex: 1,
          }}
        >
          <AtSearchBar
            showActionButton
            value={searchValue}
            onChange={(val) => {
              setSearchValue(val);
            }}
            onConfirm={(e) => {
              setSearchPhone(e?.target?.value);
            }}
            onActionClick={() => {
              setSearchPhone(searchValue);
            }}
            placeholder="请输入手机号"
            inputType="number"
          />
        </View>
        <DaySelectPopforBing
          open={dayOpen}
          onClose={() => {
            setDayOpen(false);
          }}
          onConfirm={(values) => {
            run({
              page: currentPage,
              mobile: searchPhone,
              ...values,
            });
          }}
        />
        <Button
          fill="none"
          icon={<Filter />}
          onClick={() => {
            setDayOpen(true);
          }}
        ></Button>
      </View>

      <Table bordered striped columns={columns1} data={data?.list} />

      <View
        style={{
          display: "flex",
          justifyContent: "center",
          marginTop: 12,
          marginBottom: 12,
        }}
      >
        共 {total} 条数据
      </View>

      <AtPagination
        style={{
          marginTop: 12,
        }}
        total={data?.count}
        pageSize={15}
        current={currentPage}
        onPageChange={(page) => {
          setcurrentPage(page.current);
        }}
      ></AtPagination>
    </>
  );
};
export default dianchiLog;
